import CTextAreaForm from '@/components/CTextAreaForm/CTextAreaForm'
import useEffectMenuPage from '@/useEffect/useEffectMenuPage'
import useEffectUserPage from '@/useEffect/useEffectUserPage'
import { Col, Form } from '@douyinfe/semi-ui'
import { OptionProps } from '@douyinfe/semi-ui/lib/es/select'
import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree'

// 获取 下拉选的数据
export function getRoleFormSelectData(modalVisible: boolean) {
  const { userList } = useEffectUserPage(modalVisible)
  const { menuList } = useEffectMenuPage(modalVisible)

  return { userList, menuList }
}

interface IRoleFormItem {
  confirmLoading: boolean
  userList: OptionProps[]
  menuList: TreeNodeData[]
}

export default function RoleFormItem(props: IRoleFormItem) {
  return (
    <>
      <Col span={24}>
        <Form.Input
          field="name"
          showClear
          rules={[{ required: true, message: '请输入角色名称' }]}
          label="角色名称"
        />
      </Col>
      <Col span={24}>
        <Form.Select
          multiple
          field="userIdSet"
          showClear
          label="绑定用户"
          filter
          className="w100"
          optionList={props.userList}
          maxTagCount={10}
        ></Form.Select>
      </Col>
      <Col span={24}>
        <Form.TreeSelect
          field="menuIdSet"
          showClear
          label="绑定菜单"
          filterTreeNode
          showFilteredOnly
          treeData={props.menuList}
          className="w100"
          multiple
          maxTagCount={10}
          checkRelation="unRelated"
          virtualize={{
            height: 300,
            itemSize: 28,
          }}
        ></Form.TreeSelect>
      </Col>
      <Col span={24}>
        <Form.Switch
          field="defaultFlag"
          label={{
            text: '默认角色',
          }}
        />
      </Col>
      <Col span={24}>
        <Form.Switch
          field="enableFlag"
          label={{
            text: '启用',
          }}
        />
      </Col>
      <Col span={24}>
        <CTextAreaForm></CTextAreaForm>
      </Col>
    </>
  )
}
